<template>
  <div class="my-scores">
    <div v-if="loading" class="loading-state">
      <div class="loading-spinner"></div>
      <p>加载成绩中...</p>
    </div>

    <div v-else-if="error" class="error-state">
      <div class="error-icon">⚠️</div>
      <p>{{ error }}</p>
      <button @click="$emit('refresh')" class="retry-btn">重新加载</button>
    </div>

    <div v-else-if="scores.length === 0" class="empty-state">
      <div class="empty-icon">📊</div>
      <p>暂无成绩记录</p>
    </div>

    <div v-else class="scores-list">
      <div v-for="score in scores" :key="score.sId" class="score-card">
        <div class="score-header">
          <h4 class="event-name">{{ getEventName(score) }}</h4>
          <div class="score-value" :class="getScoreClass(score)">
            {{ formatScore(score) }}
          </div>
        </div>

        <div class="score-details">
          <div class="detail-item">
            <span class="label">比赛ID:</span>
            <span class="value">{{ score.gameId }}</span>
          </div>

          <div class="detail-item">
            <span class="label">项目ID:</span>
            <span class="value">{{ score.eventId }}</span>
          </div>

          <div class="detail-item">
            <span class="label">轮次:</span>
            <span class="value">第 {{ score.rankId }} 轮</span>
          </div>

          <div class="detail-item">
            <span class="label">状态:</span>
            <span class="value" :class="getStatusClass(score)">
              {{ getStatusText(score) }}
            </span>
          </div>

          <div class="detail-item">
            <span class="label">记录时间:</span>
            <span class="value">{{ formatDate(score.createTime) }}</span>
          </div>

          <!-- 显示具体的成绩信息 -->
          <div v-if="score.sType === 1 && score.sDistance !== null" class="detail-item highlight">
            <span class="label">距离成绩:</span>
            <span class="value">{{ score.sDistance }} 米</span>
          </div>

          <div v-if="score.sType === 2 && score.sScore !== null" class="detail-item highlight">
            <span class="label">得分成绩:</span>
            <span class="value">{{ score.sScore }} 分</span>
          </div>

          <div v-if="score.sType === 3 && score.sTimeValue !== null" class="detail-item highlight">
            <span class="label">时间成绩:</span>
            <span class="value">{{ score.sTimeValue }} 秒</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

// 根据后端返回的数据结构定义 Score 类型
interface Score {
  sId?: number;
  userId?: number;
  userName?: string;
  gameId?: number;
  eventId?: number;
  scheId?: number;
  rankId?: number;
  isPromoted?: number;
  sDistance?: number;
  sScore?: number;
  sTimeValue?: number;
  sType?: number;
  createTime?: string;
}

// 定义 Props
interface Props {
  scores: Score[];
  loading: boolean;
  error: string;
}

defineProps<Props>();

// 定义 Emits
defineEmits<{
  refresh: [];
}>();

// 获取比赛名称
const getEventName = (score: Score): string => {
  return `比赛${score.gameId}-项目${score.eventId}`;
};

// 格式化成绩显示
const formatScore = (score: Score): string => {
  if (score.sType === 1 && score.sDistance !== undefined && score.sDistance !== null) {
    return `${score.sDistance}米`;
  } else if (score.sType === 2 && score.sScore !== undefined && score.sScore !== null) {
    return `${score.sScore}分`;
  } else if (score.sType === 3 && score.sTimeValue !== undefined && score.sTimeValue !== null) {
    return `${score.sTimeValue}秒`;
  } else {
    return '进行中';
  }
};

// 根据成绩类型和值获取样式类
const getScoreClass = (score: Score): string => {
  if (!score.sType) return 'score-pending';

  const hasScore = (score.sType === 1 && score.sDistance !== null) ||
                  (score.sType === 2 && score.sScore !== null) ||
                  (score.sType === 3 && score.sTimeValue !== null);

  if (!hasScore) return 'score-pending';

  // 根据成绩类型设置不同的颜色
  switch (score.sType) {
    case 1: return 'score-distance';
    case 2: return 'score-points';
    case 3: return 'score-time';
    default: return 'score-recorded';
  }
};

// 获取状态文本
const getStatusText = (score: Score): string => {
  if (score.isPromoted === 1) return '已晋级';

  const hasScore = (score.sType === 1 && score.sDistance !== null) ||
                  (score.sType === 2 && score.sScore !== null) ||
                  (score.sType === 3 && score.sTimeValue !== null);

  if (hasScore) return '已完成';
  return '进行中';
};

// 获取状态样式类
const getStatusClass = (score: Score): string => {
  if (score.isPromoted === 1) return 'status-promoted';

  const hasScore = (score.sType === 1 && score.sDistance !== null) ||
                  (score.sType === 2 && score.sScore !== null) ||
                  (score.sType === 3 && score.sTimeValue !== null);

  if (hasScore) return 'status-completed';
  return 'status-pending';
};

// 格式化日期
const formatDate = (dateString?: string): string => {
  if (!dateString) return '未知时间';

  try {
    const date = new Date(dateString);
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  } catch {
    return '无效日期';
  }
};
</script>

<style scoped>
.my-scores {
  min-height: 400px;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #666;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #31B310;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

/* 错误状态 */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.retry-btn {
  margin-top: 16px;
  padding: 8px 16px;
  background: #31B310;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.retry-btn:hover {
  background: #2a990e;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #999;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* 成绩列表 */
.scores-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.score-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e8e8e8;
  transition: transform 0.2s, box-shadow 0.2s;
}

.score-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.score-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.event-name {
  margin: 0;
  font-size: 1.2rem;
  color: #2c3e50;
  font-weight: 600;
  flex: 1;
  margin-right: 16px;
}

.score-value {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 8px;
  min-width: 80px;
  text-align: center;
  color: white;
}

/* 成绩类型样式 */
.score-distance {
  background: linear-gradient(135deg, #4CAF50, #45a049);
}

.score-points {
  background: linear-gradient(135deg, #2196F3, #1976D2);
}

.score-time {
  background: linear-gradient(135deg, #FF9800, #F57C00);
}

.score-recorded {
  background: linear-gradient(135deg, #9C27B0, #7B1FA2);
}

.score-pending {
  background: #f5f5f5;
  color: #666;
  border: 1px dashed #ddd;
}

/* 成绩详情 */
.score-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-item.highlight {
  background: #f8f9fa;
  padding: 8px;
  border-radius: 6px;
  margin: 4px 0;
  border-left: 4px solid #31B310;
}

.label {
  font-weight: 600;
  color: #555;
  min-width: 80px;
}

.value {
  color: #666;
  flex: 1;
}

/* 状态样式 */
.status-promoted {
  color: #4CAF50;
  font-weight: bold;
}

.status-completed {
  color: #2196F3;
}

.status-pending {
  color: #FF9800;
}

/* 动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .score-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .event-name {
    margin-right: 0;
    text-align: center;
  }

  .score-value {
    align-self: center;
    font-size: 1.3rem;
    min-width: 60px;
  }

  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .label {
    min-width: auto;
  }
}
</style>
